<template>
  <div>
    <h1>封装2</h1>
    <img
      width="300"
      src="https://sanjitian-1256310189.cos.ap-chengdu.myqcloud.com/gin_test/2024/11/2024_11_12_14_41_59_0235_123.jpg"
      alt=""
    />

    <el-upload
      class="upload-demo"
      v-model:file-list="fileList"
      action="http://localhost:8989/files"
      :headers="headers"
      :data="extraData"
      name="file"
      accept="image/*"
      multiple
      :show-file-list="true"
      list-type="picture-card"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :on-exceed="handleExceed"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
    >
      <el-icon><Plus /></el-icon>
    </el-upload>

    <el-dialog v-model="dialogVisible">
      <div style="width: 100%; height: 100%">
        <img
          style="object-fit: contain; width: 100%; height: 100%"
          :src="dialogImageUrl"
          alt="Preview Image"
        />
      </div>
    </el-dialog>

    <img :src="myImgSrc" alt="" />
    <div class="my-img-list">
      <img v-for="item in myImgList" :key="item.id" :src="item.filePathCos" :alt="item.fileType" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile } from 'element-plus'

export interface IResponseImgInfo {
  code: string
  data: IFileInfo
  msg: string
}

export interface IFileInfo {
  fileExtension: string
  filePathCos: string
  fileSize: string
  fileType: string
  fileUse: string
  id: number
  mineType: string
  uploadTime: string
}

const headers = {
  Authorization:
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySW5mbyI6eyJ1c2VySWQiOjIsInVzZXJuYW1lIjoiYWRtaW4iLCJuaWNrbmFtZSI6Iuezu-e7n-euoeeQhuWRmGFkbWluIiwiZGVwdElkIjoxLCJyb2xlcyI6IkFETUlOIn0sImlzcyI6ImR5czYyMzAiLCJleHAiOjE3MzE0MjgzMjUsIm5iZiI6MTczMTM5MjMyNSwiaWF0IjoxNzMxMzkyMzI1fQ.FDh1hUhudH1UKdzjmyN-mOuP63tnuH3tchNgGsdb1-I' // 如果需要 Token 认证
}

const extraData = {}

const myImgSrc = ref<string>('')

const myImgList = ref<IFileInfo[]>([])

const fileList = ref<UploadUserFile[]>([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}

const handleAvatarSuccess: UploadProps['onSuccess'] = (response: IResponseImgInfo, uploadFile) => {
  console.log(uploadFile, '#uploadFile')
  console.log(response.data.filePathCos, '#response')

  myImgList.value?.push(response.data)

  console.log(myImgList.value, 'yImgList.value')
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('Avatar picture size can not exceed 10MB!')
    return false
  }
  return true
}
</script>

<style lang="scss" scoped>
.my-img-list {
  width: 100%;
  height: 200px;
  display: flex;
  img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border: 1px solid #ccc;
  }
}
</style>
